<script setup>
// @ts-nocheck

import { StatefulLayout } from '@json-layout/core/state'
import { ref, shallowRef, getCurrentInstance, useSlots, computed } from 'vue'
import { useElementSize } from '@vueuse/core'

import Tree from '<%- baseImport %>/components/tree.vue'
import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
import '<%- baseImport %>/styles/vjsf.css'

<% compImports.forEach(function({compName, compImport}){ %>
import <%= compName %> from '<%- compImport %>'
<% }); %>

<%- compiledLayoutCode %>

const nodeComponents = {
  <% compImports.forEach(function({comp, compName}){ %>
  "<%= comp %>": <%= compName %>,
  <% }); %>  
}

const props = defineProps({
  modelValue: {
    type: null,
    default: null
  },
  options: {
    /** @type import('vue').PropType<import('<%- baseImport %>/types.js').PartialVjsfOptions | null> */
    type: Object,
    default: null
  }
})

const emit = defineEmits(emits)

const { el, statefulLayout, stateTree } = useVjsf(
  null,
  computed(() => props.modelValue),
  computed(() => ({...props.options, components: <%- JSON.stringify(pluginsComponents) %>})),
  nodeComponents,
  emit,
  null,
  null,
  computed(() => compiledLayout)
)
</script>

<template>
  <div
    ref="el"
    class="vjsf"
  >
    <tree
      v-if="statefulLayout && stateTree"
      :model-value="stateTree"
      :stateful-layout="statefulLayout"
    />
  </div>
</template>